<template>
  <div>
    <ul>
      <li class="media" v-for="item in newsList" :key="item.id">
        <router-link :to="'/home/newsinfo/'+item.id" class="alink">
          <img :src="item.img_url" alt="">
          <div class="media-body">
            <h4>{{ item.title }}</h4>
            <p class="media-message">
              <span> 发表时间：{{ item.add_time | dateFormat }}</span>
              <span>点击：{{ item.click }}</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newsList: []
    };
  },
  created() {
    this.getNewsList();
  },
  methods: {
    getNewsList() {
      this.$http.get("api/getnewslist").then(result => {
        if (result.body.status === 0) {
          this.newsList = result.body.message;
        } else {
          Toast("数据加载失败...");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.media {
  margin: 5px 15px;
  padding-bottom: 5px;
  list-style-type: none;
  border-bottom: 1px solid #eee;
  .alink {
    display: block;
    overflow: hidden;
    img {
      width: 60px;
      height: 60px;
      margin: 0 5px;
      float: left;
    }
    .media-body {
      h4 {
        color: #000;
        font-size: 14px;
        padding: 5px 0 10px 0;
      }
      .media-message {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        color: #26a2ff;
      }
    }
  }
}
</style>

